<template>
	<div class="nav-bar">
		<div class="left">
		<img width="180" src="../assets/img/common/logo.png" >
		<i class='el-icon-s-fold white' @click="handleToggle"></i>
		</div>
		<el-menu router mode="horizontal" background-color="#31404e" text-color="#fff"  active-text-color="#ffd04b">
		  <el-submenu index="1">
		    <template slot="title">
				<el-avatar size='small' :src="account.avatar"></el-avatar>
			<span class="nickname">{{account.username}}</span>
			</template>
		    <el-menu-item index="2-2">消息</el-menu-item>
		    <el-menu-item index="/admin/info">设置</el-menu-item>
		    <el-menu-item @click='handleLogOut'>退出</el-menu-item>
		  </el-submenu>
		</el-menu>
	</div>
</template>

<script>
	export default {
		data(){
			return{
				
			}
		},
		created() {
			let id = sessionStorage.id;
			this.$store.dispatch('loadInfo',id);
		},
		methods:{
			handleLogOut(){
				//清空sessionStorage
				sessionStorage.clear();
				this.$router.replace('/login')
			},
			handleToggle(){
				this.$store.commit('toggleMenu')	
			}
		},
		computed:{
			account(){
				return this.$store.state.account
			},
		}
	}
</script>

<style lang="less" scoped>
	.nav-bar{
		display: flex;
		justify-content: space-between;
		align-items: center;
		background-color: #31404e;
		.left{
			display: flex;
			align-items: center;
		}
		.nickname{
			padding-left: 10px;
		}
	}
	.el-menu--horizontal.el-menu{
		border-bottom: 0;
	}
</style>
